<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <link rel="stylesheet" href="/static/css/aui1.css">
    <link rel="stylesheet" href="/static/css/login.css">
    <link rel="shortcut icon" href="/static/img/aaa.png" />
    <title>智慧芜湖港</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>

    <body style="background-color: white;">
        <div id="app" class="contentLogin" v-cloak>
            <div class="phoneAuth">
                <div class="innerAuth">司机验证</div>
            </div>
            <div class="container">
                <form action="" method="get" class="form" style="background-color: white;">
                    <div class="formItem" style="border-top:0.543vw solid #ccc;">
                        <div class="lable">手机号:</div>
                        <div class="inpuItem">
                            <input type="text" name="" ref="phone" placeholder="请输入手机号">
                            <div></div>
                        </div>
                    </div>
                    <div class="formItem">
                        <div class="lable">验证码:</div>
                        <div class="inpuItemt">
                            <input type="text" name="" ref="code" placeholder="请输入手机短信验证码" maxlength="6">
                            <div class="send">
                                <div class="send-btn" id="send-btn" @click="disabled && getCode($event)">{{btnTitle}}</div>
                            </div>
                        </div>
                    </div>
                    <div>{{tips}}</div>
                    <div class="simulation" @click="login">登录</div>
                    <img class="logo" src="/static/img/logo.png" alt="">
                </form>
            </div>

        </div>

        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="/static/js/vue.min.js"></script>
        <script src="/static/js/confirm.js"></script>
        <script src="/static/js/api.js"></script>
        <script src="/static/js/aui-toast.js"></script>
        <script src="/static/js/axios.min.js"></script>
        <script src="/static/js/aui-dialog.js"></script>
        <script>
            var toast = new auiToast();
            var app = new Vue({
                el: "#app",
                data: {
                    disabled: true,
                    btnTitle: "获取验证码",
                    tips: "",
                    codeValue: ""
                },
                methods: {
                    validateBtn: function() {
                        //倒计时
                        let btn = document.getElementById("send-btn");
                        let time = 60;
                        let timer = setInterval(() => {
                            if (time == 0) {
                                clearInterval(timer);
                                this.btnTitle = "获取验证码";
                                this.disabled = true;
                            } else {
                                this.btnTitle = time + '秒后重试';
                                this.disabled = false;
                                time--
                            }
                        }, 1000)
                    },
                    getCode: function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        let _this = this;
                        if (!/^1[345678]\d{9}$/.test(this.$refs.phone.value)) {
                            toast.fail({
                                title: '手机号码错误',
                                duration: 2000
                            })
                        } else {
                            this.validateBtn();
                            axios.get('/api/sms', {
                                    params: {
                                        phone: this.$refs.phone.value
                                    }
                                })
                                .then(res => {
                                    if (res.data.code == '1') {
                                        toast.success({
                                            title: '验证码已发送',
                                            duration: 2000
                                        });
                                        _this.codeValue = res.data.codeValue;
                                    } else {
                                        toast.fail({
                                            title: '验证码发送失败',
                                            duration: 2000
                                        })
                                    }
                                })
                        }
                    },
                    login: function() {
                        console.log(this.codeValue);
                        if (!/^1[345678]\d{9}$/.test(this.$refs.phone.value)) {
                            auiDialog.alert({
                                title: '提示',
                                msg: '请输入正确的手机号'
                            })
                            return false
                        }
                        if ((this.$refs.code.value != this.codeValue) || this.codeValue == "") {
                            auiDialog.alert({
                                title: '提示',
                                msg: '请输入正确的验证码'
                            })
                            return false
                        }
                        axios.get('/api/register', {
                                params: {
                                    phone: this.$refs.phone.value
                                }
                            })
                            .then(res => {
                                if (res.data.code == '1') {
                                    toast.success({
                                        title: '注册成功',
                                        duration: 2000
                                    })
                                    setInterval(() => {
                                        window.location.replace("<%=redirect%>");
                                    }, 2000);
                                    //跳转链接
                                } else {
                                    auiDialog.alert({
                                        title: '提示',
                                        msg: '您没有权限查看,请联系管理员'
                                    })
                                }
                            })
                    }
                }
            })
        </script>
    </body>
</body>

</html>